<template>
  <div class="app-container">
    <el-form :inline="true" :model="accompanyParameter" class="demo-form-inline">
      <el-form-item label="订单编号">
        <el-input v-model="accompanyParameter.orderNo" size="small" style="width: 200px" clearable placeholder="订单编号" />
      </el-form-item>
      <el-form-item label="用户姓名">
        <el-input
          v-model="accompanyParameter.relationVo.name"
          size="small"
          style="width: 150px"
          clearable
          placeholder="用户姓名"
        />
      </el-form-item>
      <el-form-item label="用户电话">
        <el-input v-model="accompanyParameter.relationVo.phone" size="small" style="width: 150px" clearable placeholder="用户联系电话" />
      </el-form-item>
      <el-form-item label="支付方式">
        <el-select v-model="accompanyParameter.payType" size="small" placeholder="支付方式" clearable>
          <el-option label="用户支付" value="1" />
          <el-option label="残联" value="2" />
          <el-option label="卫健委" value="3" />
          <el-option label="会员免费" value="4" />
          <el-option label="陪诊代付" value="5" />
          <el-option label="服务券支付" value="6" />
        </el-select>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>

      <el-form-item>
        <el-button size="small" @click="handleSearch">查询</el-button>
      </el-form-item>

      <el-form-item>
        <download-excel
          class="export-excel-wrapper"
          :data="tableData.list"
          :fields="json_fields"
          name="订单列表.xls"
        >
          <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
          <el-button type="primary" size="small">导出EXCEL</el-button>

        </download-excel>
        <!--        <el-button size="small" type="danger" @click="del">删除所选</el-button>-->
      </el-form-item>

    </el-form>
    <el-table
      id="out-table"
      class="el-table"
      border
      stripe
      :data="tableData.list"
      style="width: 98%;"
      default-expand-all
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <div class="box">
            <div style="width: 420px">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>就诊人员信息</span>
                </div>
                <div class="box card">
                  <div class="text item">
                    患者姓名：<span>{{ props.row.relationVo.name }}</span>
                  </div>
                  <div class="text item">
                    联系电话：<span>{{ props.row.relationVo.phone }}</span>
                  </div>
                </div>
                <div class="text item">
                  身份证号：<span>{{ props.row.relationVo.idCard }}</span>
                </div>
                <div class="text item">
                  起点地址：<span>{{ props.row.relationVo.startAddress }}</span>
                </div>
                <div class="text item">
                  终点医院：<span>{{ props.row.relationVo.overHospital }}</span>
                </div>
                <div class="text item">
                  服务类型：<span v-if="props.row.relationVo.type===1">门诊</span>
                  <span v-if="props.row.relationVo.type===2">血透</span>
                  <span v-if="props.row.relationVo.type===3">配药</span>
                </div>
                <div class="text item">
                  路程距离：<span>{{ props.row.relationVo.distance }}M</span>
                </div>
                <div class="text item">
                  就诊时间：<span>{{ props.row.relationVo.startTime }}</span>
                </div>
                <div class="text item">
                  <!--                   1公交 2网约 3 步行 4 非急救转运 5出租车 -->
                  出行方式：<span v-if="props.row.relationVo.tripType===1">公交</span>
                  <span v-if="props.row.relationVo.tripType===2">网约</span>
                  <span v-if="props.row.relationVo.tripType===3">步行</span>
                  <span v-if="props.row.relationVo.tripType===4">非急救转运</span>
                  <span v-if="props.row.relationVo.tripType===5">出租车</span>
                </div>
              </el-card>

            </div>
            <div style="width: 370px">
              <el-card class="box-card" style="width: 350px">
                <div slot="header" class="clearfix">
                  <span>接单人员信息</span>
                </div>
                <div v-if="props.row.accompanyVo !=null">

                  <div class="box card">
                    <div class="text item">
                      护工工号：<span>{{ props.row.accompanyVo.accompanyId }}</span>
                    </div>
                    <div class="text item">
                      护工姓名：<span>{{ props.row.accompanyVo.name }}</span>
                    </div>
                  </div>
                  <div class="text item">
                    联系电话：<span>{{ props.row.accompanyVo.phone }}</span>
                  </div>
                  <div class="text item">
                    接单时间：<span>{{ props.row.accompanyVo.receiveTime }}</span>
                  </div>
                </div>
                <div v-else>
                  <span style="color: #848484">暂无陪诊人员信息</span>
                </div>

              </el-card>

            </div>
            <div style="width: 370px">
              <el-card class="box-card" style="width: 350px">
                <div slot="header" class="clearfix">
                  <span>订单金额</span>
                </div>
                <div class="box card">
                  <div class="text item">
                    预估金额：<span>{{ props.row.orderMoneyVo.estimateMoney }}元</span>
                  </div>
                  <div class="text item">
                    实付金额：<span>{{ props.row.orderMoneyVo.money }}元</span>
                  </div>
                </div>

                <div class="box card">
                  <div class="text item">
                    基本费用：<span>{{ props.row.orderMoneyVo.basicMoney }}元</span>
                  </div>

                  <div class="text item">
                    陪诊人员费：<span>{{ props.row.orderMoneyVo.accompanyMoney }}元</span>
                  </div>
                </div>

                <div class="box card">
                  <div class="text item">
                    推荐费用：<span>{{ props.row.orderMoneyVo.awardMoney }}元</span>
                  </div>
                  <div class="text item">
                    超出费用：<span>{{ props.row.orderMoneyVo.exceedMoney }}元</span>
                  </div>
                </div>
                <div class="text item">
                  *本单收入：<span>元</span>
                </div>

              </el-card>

            </div>

            <div style="width: 200px">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>其他操作</span>
                </div>
                <div class="box other ">
                  <div class="mr-2 box-c d-ai-c" @click="serverStatus(props.row.orderNo)">
                    <div>
                      <img style="height: 70px ;width: 70px" src="../../assets/order/order-main.png" alt="">
                    </div>
                    <div style="margin-top: 10px;color: #FF7744">
                      订单服务状态
                    </div>

                  </div>

                  <div class="mr-2  box-c d-ai-c" @click="voucher(props.row.orderNo)">
                    <div>
                      <img style="height: 70px ;width: 70px" src="../../assets/order/voucher.png" alt="">
                    </div>
                    <div style="margin-top: 10px;color: #FF7744">
                      就医凭证
                    </div>

                  </div>

                  <!--                  <div class=" mr-2  box-c d-ai-c">-->
                  <!--                    <div>-->
                  <!--                      <img style="height: 70px ;width: 70px" src="../../assets/order/comment.png" alt="">-->
                  <!--                    </div>-->
                  <!--                    <div style="margin-top: 10px;color: #FF7744">-->
                  <!--                      服务评价-->
                  <!--                    </div>-->

                  <!--                  </div>-->

                  <div class=" box-c d-ai-c" @click="voice(props.row.orderNo)">
                    <div>
                      <img style="height: 70px ;width: 70px" src="../../assets/order/visit.png" alt="">
                    </div>
                    <div style="margin-top: 10px;color: #FF7744">
                      电话回访
                    </div>

                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="orderNo"
        label="订单编号"
        width="200"
      />
      <el-table-column
        align="center"
        prop="relationVo.type"
        label="订单类型"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.relationVo.type===1">门诊</el-tag>
          <el-tag v-if="scope.row.relationVo.type===2">血透</el-tag>
          <el-tag v-if="scope.row.relationVo.type===3">配药</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="relationVo.name"
        label="患者姓名"
        width="110"
      />
      <el-table-column
        align="center"
        prop="source"
        width="150"
        label="订单来源"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.source===1">PC后台</el-tag>
          <el-tag v-if="scope.row.source===2">移动端</el-tag>
        </template>

      </el-table-column>
      <el-table-column
        align="center"
        prop="relationVo.distance"
        label="路程距离(米)"
        width="120"
      />
      <el-table-column
        align="center"
        prop="status"
        label="订单状态"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status===1">待支付</el-tag>
          <el-tag v-if="scope.row.status===2">预约中</el-tag>
          <el-tag v-if="scope.row.status===3">进行中</el-tag>
          <el-tag v-if="scope.row.status===4">待评价</el-tag>
          <el-tag v-if="scope.row.status===5">已完成</el-tag>
          <el-tag v-if="scope.row.status===6">已取消</el-tag>
          <el-tag v-if="scope.row.status===7">已超时取消</el-tag>
        </template>

      </el-table-column>
      <el-table-column
        align="center"
        prop="receiveStatus"
        label="派单状态"
        width="100"
      >
        <template slot-scope="scope">
          <!--         状态 默认: 0  接单 1 开始服务 2抵达地点 3离开地点
          4结束服务 -->
          <el-tag v-if="scope.row.receiveStatus==null">未接单</el-tag>
          <el-tag v-if="scope.row.receiveStatus===0">接单</el-tag>
          <el-tag v-if="scope.row.receiveStatus===1">开始服务</el-tag>
          <el-tag v-if="scope.row.receiveStatus===2">抵达地点</el-tag>
          <el-tag v-if="scope.row.receiveStatus===3">离开地点</el-tag>
          <el-tag v-if="scope.row.receiveStatus===4" type="danger">结束服务</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="visit"
        label="回访状态"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.visit===0" type="danger">未回访</el-tag>
          <el-tag v-if="scope.row.visit===1">已回访</el-tag>

        </template>

      </el-table-column>
      <el-table-column
        align="center"
        prop="createTime"
        label="下单时间"
        width="160"
      />
      <el-table-column
        align="center"
        prop="remark2"
        label="备注"
        width="240"
      />
      <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">

          <el-button
            plain
            type="primary"
            size="mini"
            @click="handleDetail(scope.row.orderNo)"
          >查看详情
          </el-button>
          <el-button
            plain
            size="mini"
            @click="handRemark(scope.row.orderNo)"
          >备注
          </el-button>
          <el-button
            plain
            size="mini"
            @click="open(scope.row.orderNo)"
          >结束订单
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--备注弹窗-->
    <el-dialog title="备注订单信息" width="30%" :visible.sync="dialogFormVisible">
      <el-form :model="remarkInfo">
        <el-form-item label="备注内容" label-width="50">
          <el-input v-model="remarkInfo.remark2" type="textarea" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="remark">确 定</el-button>
      </div>
    </el-dialog>

    <!--    查看详情弹窗-->
    <el-dialog title="订单详情" width="50%" :visible.sync="dialogFormVisible2">
      <el-form :model="orderInfo">
        <div class="box">
          <el-form-item label="订单编号" label-width="80px">
            <el-input v-model="orderInfo.orderNo" disabled style="width: 230px" autocomplete="off" />
          </el-form-item>
          <el-form-item label="订单类型" label-width="80px">
            <el-select v-model="orderInfo.type" disabled size="small" style="width: 150px" placeholder="支付方式" clearable>
              <el-option label="门诊" :value="1" />
              <el-option label="血透" :value="2" />
              <el-option label="配药" :value="2" />
            </el-select>
          </el-form-item>

          <el-form-item label="订单来源" label-width="80px">
            <el-select
              v-model="orderInfo.payType"
              disabled
              size="small"
              style="width: 150px"
              placeholder="支付方式"
              clearable
            >
              <el-option label="用户支付" :value="1" />
              <el-option label="残联" :value="2" />
              <el-option label="卫健委" :value="3" />
              <el-option label="会员免费" :value="4" />
              <el-option label="陪诊代付" :value="5" />
              <el-option label="服务券支付" :value="6" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box">
          <el-form-item label="订单路程" label-width="80px">
            <el-input v-model="orderInfo.relationVo.distance" disabled style="width: 120px" autocomplete="off" />
          </el-form-item>

          <el-form-item label="订单状态" label-width="80px">
            <!--            订单状态 1待支付 2 预约中 3进行中 4待评价 5已完成 6 已取消 7已超时  -->
            <el-select
              v-model="orderInfo.status"
              disabled
              size="small"
              style="width: 150px"
              placeholder="支付方式"
              clearable
            >
              <el-option label="待支付" :value="1" />
              <el-option label="预约中" :value="2" />
              <el-option label="进行中" :value="3" />
              <el-option label="待评价" :value="4" />
              <el-option label="已完成" :value="5" />
              <el-option label="已取消" :value="6" />
              <el-option label="已超时取消" :value="7" />
            </el-select>
          </el-form-item>

        </div>
        <div class="box">
          <el-form-item label="派单状态" label-width="80px">
            <el-input v-model="orderInfo.receiveStatus" disabled style="width: 150px" autocomplete="off" />
          </el-form-item>
          <el-form-item label="是否回访" label-width="80px">
            <el-switch
              v-model="orderInfo.visit"
            />
          </el-form-item>

        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="cancelorder">取消订单</el-button>
        <el-button type="primary" @click="dialogFormVisible2 = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!--    服务状态弹窗-->
    <el-drawer
      size="30%"
      title="服务进度"
      :visible.sync="drawer1"
    >
      <div style="height: 500px;padding: 10px 30px">
        <el-steps direction="vertical" :active="receiveStatus.length">
          <el-step :title="'开始接单 '+(receiveStatus.length>0?'（'+receiveStatus[0].createTime+'）':'')" :description="(receiveStatus.length>0?receiveStatus[0].address:'')" />
          <el-step :title="'开始服务 '+(receiveStatus.length>1?'（'+receiveStatus[1].createTime+'）':'')" :description="(receiveStatus.length>1?receiveStatus[1].address:'')" />
          <el-step :title="'抵达地点 '+(receiveStatus.length>2?'（'+receiveStatus[2].createTime+'）':'')" :description="(receiveStatus.length>2?receiveStatus[2].address:'')" />
          <el-step :title="'离开地点 '+(receiveStatus.length>3?'（'+receiveStatus[3].createTime+'）':'')" :description="(receiveStatus.length>3?receiveStatus[3].address:'')" />
          <el-step :title="'结束服务 '+(receiveStatus.length>4?'（'+receiveStatus[4].createTime+'）':'')" finish-status="success" :description="(receiveStatus.length>4?receiveStatus[4].address:'')" />
        </el-steps>
      </div>
    </el-drawer>
    <!--    客服语音上传-->
    <el-dialog
      title="上传语音"
      :visible.sync="dialogVisible3"
      width="40%"
    >
      <el-form>
        <el-form-item label="上传语音" label-width="80px">
          <el-upload
            class="upload-demo"
            drag
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-progress="fileIng"
            :on-success="handleAvatarSuccess"
            action="https://app.xiangban365.com/app_mobile/upload/file"
            multiple
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="theUrl !==''" label="播放语音" label-width="80px">
          <VueAudio :the-url="theUrl" />
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="telephoneInterviews">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="就医凭证"
      :visible.sync="dialogVisible4"
      width="40%"
    >
      <el-form>
        <el-form-item label="就医凭证" label-width="80px">
          <el-upload
            class="avatar-uploader"
            action="https://app.xiangban365.com/app_mobile/upload/file"
            :show-file-list="false"
            :on-success="MedicalhandleAvatarSuccess"
            :before-upload="MedicalbeforeAvatarUpload"
          >
            <img v-if="photo" :src="photo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
          <el-upload
            class="avatar-uploader"
            action="https://app.xiangban365.com/app_mobile/upload/file"
            :show-file-list="false"
            :on-success="MedicalhandleAvatarSuccess1"
            :before-upload="MedicalbeforeAvatarUpload2"
          >
            <img v-if="photo1" :src="photo1" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="receiveOrder">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页-->
    <el-pagination
      background
      :current-page="pageNum"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="handlePrevClick"
      @next-click="handleNextClick"
    />
  </div>

</template>

<script>
import VueAudio from '@/components/playMusic'
import {
  finishOrder,
  getOrder,
  listAccompanyReceiveStatus,
  listOrderPage,
  remarkOrVisit,
  telephoneInterviews,
  getMedicalData,
  receiveOrder,
  cancelOrder
} from '@/api/order'

export default {
  name: 'Relation',
  components: {
    VueAudio
  },
  data() {
    return {
      json_fields: {
        '序号': 'number',
        '订单号': 'orderNo',
        '身份证号': 'relationVo.idCard',
        '被服务对象': 'relationVo.name',
        '联系电话': 'relationVo.phone',
        '服务项目': 'serverType',
        '下单时间': 'createTime',
        '预约时间': 'relationVo.startTime',
        '陪诊人员姓名': 'accompanyVo.name',
        '联系电话(陪诊)': 'accompanyVo.phone',
        '出发点': 'relationVo.startAddress',
        '就诊时间': 'relationVo.startTime',
        '预约医院': 'relationVo.overHospital',
        '基础费用': 'orderMoneyVo.basicMoney',
        '实付费用': 'orderMoneyVo.money',
        '路程距离(m)': 'relationVo.distance',
        '备注': 'overRemark'
      },
      value1: '',
      photo: '',
      photo1: '',
      MedicalData: [], // 就医凭证
      dialogVisible3: false,
      // 查询下的=》用来源
      drawer1: false,
      options: [{
        value: 1,
        label: '移动端注册用户'
      }, {
        value: 2,
        label: '残联'
      }, {
        value: 3,
        label: '卫健委'
      }, {
        value: 4,
        label: '自费用户'
      }],
      accompany: {}, // 陪诊搜索条件
      accompanyInfo: [{
        name: '哈哈哈',
        sex: '男',
        age: '68',
        phone: '18955555555',
        idCard: '342225195402082222',
        useNumber: '1',
        freeNumber: '1',
        source: '残联',
        status: '正常',
        createTime: '2021-10-21 10:20:00'
      }],
      relationList: [
        {
          name: '哈哈哈',
          sex: '男',
          age: '68',
          phone: '18955555555',
          idCard: '342225195402082222',
          address: '苏州市姑苏区景德路雍熙寺弄23号',
          createTime: '2021-10-24 10:20:21',
          identity: '普通陪诊',
          status: '正常',
          accompanyId: '10001'
        }
      ],
      pageNum: 1,
      pageSize: 10,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogVisible4: false,
      formLabelWidth: '100px',
      formLabelWidth2: '100px',
      popType: '',
      visible: false,
      orderParameter: {},
      postForm: {
        detailedAddress: '',
        longitude: '',
        latitude: ''
      },
      movies: {},
      drawer: false,
      tableData: [],
      form: '',
      accompanyParameter: {
        orderNo: '',
        relationVo: {
          type: '',
          name: '',
          idCard: ''
        },
        accompanyVo: {
          name: ''
        },
        orderStartTime: '',
        orderFinishTime: ''
      },
      remarkInfo: {
        orderNo: '',
        remark2: ''
      },
      orderNo: '',
      orderInfo: {
        relationVo: {}
      },
      receiveStatus: [

      ],
      recording: '',
      loading: '',
      theUrl: '',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  },
  created() {
    this.listOrderPage()
  },
  methods: {
    open(orderNo) {
      this.$confirm('是否提前结束订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.finishOrder(orderNo)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 提前结束订单
    finishOrder(orderNo) {
      finishOrder({
        orderNo: orderNo
      }).then(res => {
        if (res.success) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.listOrderPage()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    // 取消订单
    cancelorder() {
      cancelOrder({
        orderNo: this.orderNo
      }).then(res => {
        if (res.success) {
          this.$message({
            message: '取消成功',
            type: 'success'
          })
          this.dialogFormVisible2 = false
          this.listOrderPage()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    // 修改就医凭证
    receiveOrder() {
      const array = []
      array.push(this.photo)
      array.push(this.photo1)
      receiveOrder({
        orderNo: this.orderNo,
        data: JSON.stringify(array)
      }).then(res => {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.dialogVisible4 = false
      })
    },
    // 就医凭证
    voucher(orderNo) {
      this.dialogVisible4 = true
      this.orderNo = orderNo
      this.getMedicalData()
    },
    MedicalhandleAvatarSuccess(res, file) {
      this.photo = res.dataMap
      console.log(this.photo)
    },
    MedicalbeforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    MedicalhandleAvatarSuccess1(res, file) {
      this.photo1 = res.dataMap
      console.log(this.photo)
    },
    MedicalbeforeAvatarUpload2(file) {
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    getMedicalData() {
      this.photo = ''
      this.photo1 = ''
      getMedicalData({
        orderNo: this.orderNo
      }).then(res => {
        this.MedicalData = res.dataMap.medicalData
        this.photo = this.MedicalData[0]
        this.photo1 = this.MedicalData[1]
        console.log(this.MedicalData)
      })
    },
    fileIng(file) {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'audio/mpeg'
      if (!isJPG) {
        this.$message.error('上传文件只能是 MP3 格式!')
      }
      return isJPG
    },
    // 文件上传
    handleAvatarSuccess(res, file) {
      if (res.success) {
        this.loading.close()
        this.$message({
          message: '录音上传完成，请点保存',
          type: 'success'
        })
        this.recording = res.dataMap
        this.theUrl = ''
        setTimeout(() => {
          this.theUrl = res.dataMap
        }, 10)
      }
    },
    telephoneInterviews() {
      if (this.recording === '') {
        this.$message({
          message: '请上传新的录音文件',
          type: 'error'
        })
        return
      }
      telephoneInterviews({
        orderNo: this.orderNo,
        recording: this.recording
      }).then(res => {
        if (res.success) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.dialogVisible3 = false
          this.listOrderPage()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    voice(orderNo) {
      this.theUrl = ''
      this.recording = ''
      this.dialogVisible3 = true
      this.orderNo = orderNo
      getOrder({
        orderNo: orderNo
      }).then(res => {
        this.orderInfo = res.dataMap
        this.theUrl = this.orderInfo.recording == null ? '' : this.orderInfo.recording
        // this.recording = this.orderInfo.recording==null?'':this.orderInfo.recording
      })
    },
    serverStatus(orderNo) {
      listAccompanyReceiveStatus({
        orderNo: orderNo
      }).then(res => {
        this.receiveStatus = res.dataMap
      })
      this.drawer1 = true
    },
    // 备注
    remark() {
      this.remarkInfo.orderNo = this.orderNo
      remarkOrVisit(this.remarkInfo).then(res => {
        if (res.success) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.remarkInfo = {
            orderNo: '',
            remark2: ''
          }
          this.listOrderPage()

          this.dialogFormVisible = false
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    // 详情弹窗
    handleDetail(orderNo) {
      this.orderNo = orderNo
      this.dialogFormVisible2 = true
      getOrder({
        orderNo: orderNo
      }).then(res => {
        this.orderInfo = res.dataMap
      })
    },

    // 备注弹窗
    handRemark(orderNo) {
      this.dialogFormVisible = true
      this.orderNo = orderNo
    },

    // 修改弹窗
    handleUpd() {
      this.dialogFormVisible = true
    },
    // 勾选的信息
    handleSelectionChange(val) {
      console.log(val)
    },
    // 搜索
    handleSearch() {
      if (this.value1 === '' || this.value1 === null) {
        this.accompanyParameter.orderStartTime = ''
        this.accompanyParameter.orderFinishTime = ''
      } else {
        this.accompanyParameter.orderStartTime = this.value1[0]
        this.accompanyParameter.orderFinishTime = this.value1[1]
      }
      this.listOrderPage()
    },
    listOrderPage() {
      listOrderPage(this.accompanyParameter, this.pageNum, this.pageSize).then(res => {
        this.tableData = res.dataMap
        for (var i = 0; i < res.dataMap.list.length; i++) {
          this.tableData.list[i]['number'] = i + 1
          if (res.dataMap.list[i].relationVo.type === 1) {
            this.tableData.list[i]['serverType'] = '门诊陪伴'
          } else if (res.dataMap.list[i].relationVo.type === 2) {
            this.tableData.list[i]['serverType'] = '血透'
          } else if (res.dataMap.list[i].relationVo.type === 3) {
            this.tableData.list[i]['serverType'] = '代配药'
          }
          if (res.dataMap.list[i].relationVo.distance > 5000) {
            this.tableData.list[i]['overRemark'] = '路程超过5公里，每5公里20元，本订单增加' + this.tableData.list[i].orderMoneyVo.exceedMoney + '元'
          }
        }
        console.log(this.tableData.list)
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.listOrderPage()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.listOrderPage()
    },
    handlePrevClick() {
      this.pageNum--
      this.listOrderPage()
    },
    handleNextClick() {
      this.pageNum++
      this.listOrderPage()
    }

  }
}
</script>

<style lang="scss" scoped>

.card {
  div {
    margin-right: 30px;
  }

}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;

  span {
    color: #7c93b1;
  }
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  min-height: 350px;
  width: 400px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.base-input {
  width: 200px;

}

.el-select .el-input {
  width: 110px;
}

.el-dialog__body {
  padding: 30px 40px;
}

.app-container {
  margin-top: 10px;
}

.el-pagination {
  float: right;
  margin: 10px 30px;
}

.el-table {
  margin: 10px 0px;
}
</style>
<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
